<template>
	<view class="info-entry-page">
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 健康状况模块 -->
			<view class="module-card">
				<view class="module-header">
					<view class="module-title-line"></view>
					<text class="module-title">健康状况</text>
				</view>
				<view class="module-content">
					<view class="form-item">
						<text class="form-label">体温</text>
						<input class="form-input" v-model="healthForm.temperature" placeholder="请输入体温" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">血压</text>
						<input class="form-input" v-model="healthForm.bloodPressure" placeholder="请输入血压" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">心率</text>
						<input class="form-input" v-model="healthForm.heartRate" placeholder="请输入心率" />
					</view>
				</view>
			</view>

			<!-- 饮食记录模块 -->
			<view class="module-card">
				<view class="module-header">
					<view class="module-title-line"></view>
					<text class="module-title">饮食记录</text>
				</view>
				<view class="module-content">
					<view class="form-item">
						<text class="form-label">早餐</text>
						<input class="form-input" v-model="dietForm.breakfast" placeholder="请输入早餐" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">午餐</text>
						<input class="form-input" v-model="dietForm.lunch" placeholder="请输入午餐" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">晚餐</text>
						<input class="form-input" v-model="dietForm.dinner" placeholder="请输入晚餐" />
					</view>
				</view>
			</view>

			<!-- 老人护理模块 -->
			<view class="module-card">
				<view class="module-header">
					<view class="module-title-line"></view>
					<text class="module-title">老人护理</text>
				</view>
				<view class="module-content">
					<view class="form-item">
						<text class="form-label">护理标题</text>
						<input class="form-input" v-model="careForm.title" placeholder="定时喂药—阿莫西林" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">护理描述</text>
						<input class="form-input" v-model="careForm.description" placeholder="请输入护理描述" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text class="form-label">上传图片</text>
						<view class="upload-container">
							<view class="upload-area" @tap="chooseImage">
								<text class="upload-icon">+</text>
								<text class="upload-text">选择图片</text>
							</view>
							<view v-if="uploadedImages.length > 0" class="images-preview">
								<view class="image-item" v-for="(image, index) in uploadedImages" :key="index">
									<image :src="image" class="preview-image" mode="aspectFill"></image>
									<view class="remove-btn" @tap.stop="removeImage(index)">×</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" :class="{ loading: loading }" @tap="submitInfo" :disabled="loading">
				<text v-if="loading">提交中...</text>
				<text v-else>录入信息</text>
			</button>
		</view>
	</view>
</template>

<script>
import { apiAddElderlyRecord } from '@/request/api.js'

export default {
	data() {
		return {
			elderlyId: '',
			loading: false,
			healthForm: {
				temperature: '',
				bloodPressure: '',
				heartRate: ''
			},
			dietForm: {
				breakfast: '',
				lunch: '',
				dinner: ''
			},
			careForm: {
				title: '定时喂药—阿莫西林',
				description: '',
				image: ''
			},
			uploadedImages: [] // 存储上传的图片
		}
	},
	computed: {
		// 获取当前时间
		currentDateTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = (now.getMonth() + 1).toString().padStart(2, '0');
			const day = now.getDate().toString().padStart(2, '0');
			const hours = now.getHours().toString().padStart(2, '0');
			const minutes = now.getMinutes().toString().padStart(2, '0');
			const seconds = now.getSeconds().toString().padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
	},
	onLoad(options) {
		if (options.id) {
			this.elderlyId = options.id;
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 6, // 最多选择6张图片
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 将新选择的图片添加到现有图片列表中
					this.uploadedImages.push(...res.tempFilePaths);
					// 为了兼容原有逻辑，设置第一张图片到careForm.image
					if (res.tempFilePaths.length > 0) {
						this.careForm.image = res.tempFilePaths[0];
					}
				},
				fail: (err) => {
					console.log('选择图片失败:', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 移除图片
		removeImage(index) {
			this.uploadedImages.splice(index, 1);
			// 如果移除的是第一张图片，更新careForm.image
			if (index === 0) {
				this.careForm.image = this.uploadedImages.length > 0 ? this.uploadedImages[0] : '';
			}
		},
		
		// 表单验证
		validateForm() {
			// 检查是否选择了老人
			if (!this.elderlyId) {
				uni.showToast({
					title: '未获取到老人信息',
					icon: 'none'
				});
				return false;
			}
			
			// 检查必填字段
			const hasHealthData = this.healthForm.temperature || this.healthForm.bloodPressure || this.healthForm.heartRate;
			const hasDietData = this.dietForm.breakfast || this.dietForm.lunch || this.dietForm.dinner;
			const hasCareData = this.careForm.title || this.careForm.description;
			
			if (!hasHealthData && !hasDietData && !hasCareData) {
				uni.showToast({
					title: '请至少填写一项信息',
					icon: 'none'
				});
				return false;
			}
			
			return true;
		},
		
		// 提交信息
		async submitInfo() {
			// 验证表单
			if (!this.validateForm()) {
				return;
			}
			
			if (this.loading) return;
			
			try {
				this.loading = true;
				
				// 构建FormData - 参考tabbar/list的实现
				const formData = {
					member_id: this.elderlyId,
					// 健康指标
					health_temperature: this.healthForm.temperature || '',
					health_pressure: this.healthForm.bloodPressure || '',
					health_rate: this.healthForm.heartRate || '',
					// 饮食记录
					food_morning: this.dietForm.breakfast || '',
					food_noon: this.dietForm.lunch || '',
					food_dinner: this.dietForm.dinner || '',
					// 护理信息
					title: this.careForm.title || '护理记录',
					remark: this.careForm.description || '',
					// 图片 - 如果有上传的图片，用|分隔；否则使用默认值
					'pics[]': this.uploadedImages.length > 0 ? this.uploadedImages.join('|') : '',
					// 记录时间
					record_time: this.currentDateTime
				};
				
				console.log('提交信息录入数据:', formData);
				
				const response = await apiAddElderlyRecord(formData);
				
				if (response.code === 0) {
					uni.showToast({
						title: '信息录入成功',
						icon: 'success'
					});
					
					// 清空表单
					this.resetForm();
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: response.msg || '录入失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('信息录入失败:', error);
				uni.showToast({
					title: '录入失败，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 重置表单
		resetForm() {
			this.healthForm = {
				temperature: '',
				bloodPressure: '',
				heartRate: ''
			};
			this.dietForm = {
				breakfast: '',
				lunch: '',
				dinner: ''
			};
			this.careForm = {
				title: '定时喂药—阿莫西林',
				description: '',
				image: ''
			};
			this.uploadedImages = [];
		}
	}
}
</script>

<style lang="scss" scoped>
.info-entry-page {
	min-height: 128vh;
	background: #F8F8F8;
}

.nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #FFFFFF;
	border-bottom: 1rpx solid #E0E0E0;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon {
	font-size: 48rpx;
	color: #333333;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.placeholder {
	width: 60rpx;
}

.content-area {
	padding: 30rpx 20rpx;
}

.module-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.module-header {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.module-title-line {
	width: 8rpx;
	height: 40rpx;
	background: #E60012;
	border-radius: 4rpx;
	margin-right: 20rpx;
}

.module-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.module-content {
	padding: 30rpx;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}

.form-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 160rpx;
	margin-right: 20rpx;
}

.form-input {
	flex: 1;
	height: 60rpx;
	border: 1rpx solid #E0E0E0;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333333;
	background: #FFFFFF;
}

.divider {
	height: 1rpx;
	background: #E0E0E0;
	margin: 0 20rpx;
}

.upload-container {
	flex: 1;
}

.upload-area {
	width: 200rpx;
	height: 200rpx;
	border: 2rpx dashed #E0E0E0;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #F8F8F8;
}

.upload-icon {
	font-size: 60rpx;
	color: #999999;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999999;
}

.images-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 20rpx;
}

.image-item {
	position: relative;
	width: 120rpx;
	height: 120rpx;
}

.preview-image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.remove-btn {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background: #ff4757;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-weight: bold;
	z-index: 2;
}

.submit-section {
	padding: 40rpx 20rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	border-radius: 20rpx;
	transition: all 0.2s ease;
}

.submit-btn:active {
	transform: scale(0.98);
	background: linear-gradient(135deg, #E66A00 0%, #E63946 100%);
}

.submit-btn.loading {
	background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
	opacity: 0.6;
}

.submit-btn:disabled {
	opacity: 0.6;
}
</style> 